<template>
  <el-dialog
    :title="title"
        width="100%"
    :fullscreen="true"
    top="0"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <div id="printMe">
    <div align="center" style="width:100% ;font-size:18px ;margin-left:2% ;color: #080808;padding-bottom:10px;"> <b>抵押登记设立业务（按发起机构）</b></div>


    <table id="table-detail"  class="table table-bordered"  border="1"  style="border-color:#ddd;"  cellspacing="0">
        <tr>
            <td class="title" rowspan="2" >机构类型</td>
            <td class="title"  rowspan="2" >机构代码</td>
            <td class="title"  rowspan="2" >机构名称</td>
            <td class="title"  rowspan="2" >机构区域</td>
            <td class="title"  rowspan="2" >预告登记</td>
            <td class="title"  rowspan="2" >预抵登记</td>
            <td class="title"  rowspan="2" >预转本</td>
            <td class="title" colspan="2">首次登记</td>
            
            <td class="title"  rowspan="2" >债务金额</td>
            <td class="title"  rowspan="2" >业务量合计</td>
        </tr>

        <tr>
            <td class="title" >委托公证</td>
            <td class="title" >全程网办</td>
        </tr>

        <tr v-for="(dyr,index) in this.dataList" :key="index">
            <td  class="text">{{dyr.bankData.lineno}}</td>
            <td  class="text" >{{dyr.bankData.bankid}}</td>
            <td  class="text" >{{dyr.bankData.bankname}}</td>
            <td  class="text" >{{dyr.bankData.region}}</td>
            <td  class="text">{{dyr.ygdjNum}}</td>
            <td  class="text" >{{dyr.yddjNum}}</td>
            <td  class="text" >{{dyr.yzbNum}}</td>
            <td  class="text" >{{dyr.wtgzNum}}</td>
            <td  class="text" >{{dyr.qwbNum}}</td>
            <td  class="text" >{{dyr.zwje}}</td>
            <td  class="text" >{{dyr.totalNum}}</td>
        </tr>    
    </table>

</div>
    <span slot="footer" class="dialog-footer">
      <el-button  type="primary" v-print="printObj">打印</el-button>
      <el-button  type="primary" @click="export2Excel()">导出</el-button>
      <el-button @click="visible = false">返回</el-button>

    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {

      return {

        printLoading: true,
        printObj: {
          id: "printMe",
          popTitle: '条形码打印',
          beforeOpenCallback (vue) {
            vue.printLoading = true
            console.log('打开之前')
          },
          openCallback (vue) {
            vue.printLoading = false
            console.log('执行了打印')
          },
          closeCallback (vue) {
            console.log('关闭了打印工具')
          }
        },

        visible: false,
        title: '',
        dataListLoading: false,
        title: '',
        dataListSelections: [],
        dataList: []
      }
    },
    methods: {

      export2Excel: function() {
            let xlsxParam = { raw: true };
            let tables = document.getElementById("table-detail");
            let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
            var table_write = this.$XLSX.write(table_book, {
              bookType: "xlsx",
              bookSST: true,
              type: "array"
            });
            try {
              this.$FileSaver.saveAs(
                new Blob([table_write], { type: "application/octet-stream" }),
                "业务量统计（按发起机构）.xlsx"
              );
            } catch (e) {
              if (typeof console !== "undefined") console.log(e, table_write);
            }
            return table_write;
        },

      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },

      init (bankid, queryway, seRegion, region, bdcno, begindate, enddate) {
          this.title = '业务量统计（按发起机构）'

        this.visible = true
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl(`/bdc/bdcbusiness/countData`),
              method: 'get',
              params: this.$http.adornParams({
                  'bankid': bankid,
                  'queryway': queryway,
                  'seRegion': seRegion,
                  'region': region,
                  'bdcno': bdcno,
                  'begindate': begindate,
                  'enddate': enddate
              })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataList = data.list
            }
            this.dataListLoading = false
        })


      }
     
      
    }
  }
</script>
<style>
.table-bordered {
    border: 1px solid #ddd;
}
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
.table-bordered {
    border: 1px solid #ddd;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    color: #81848b;
    vertical-align: top;
    border-top: 1px solid #ddd;

        font-size: 14px;
    font-family: Arial, 'Microsoft YaHei', 'SimSun';
}

.title{
  text-align:center;font-weight:bold; border: 1px solid #ddd;
}

.text{
  text-align:center;font-weight:normal;
  border: 1px solid #ddd;

}

.head{
  text-align:center;font-weight:bold;font-size:16px;background:#D3D3D3;border: 1px solid #ddd;

}
    



.table {
    width: 100%;
    max-width: 100%;
}
</style>